<template>
  <view class="reply-com" >
    <view class="reply-input" @click="emits('reply')">
      <nut-icon name="edit" size="14" custom-color="#8f8e8e"></nut-icon>
      <view class="reply-tip" >说点什么...</view>
    </view>
    <view class="status-bar" >
      <view class="status-bar-item"  @click="handleLike">
        <!-- <nut-icon 
          class="icon" 
          :name="likeStatus ? 'heart-fill' : 'heart1'" 
          size="26" 
          :custom-color="likeStatus ? '#F01E14' : '#8f8e8e'" 
        ></nut-icon> -->
        <image class="icon" mode="aspectFill" :src="likeStatus ? '/static/common/like.png' : '/static/common/unlike.png'" />
        <view class="count" >{{itemData.allLikeCount}}</view>
      </view>
      <view class="status-bar-item" >
        <nut-icon class="icon" name="comment" size="22" custom-color="#8f8e8e"  ></nut-icon>
        <view class="count" >{{itemData.messageCount}}</view>
      </view>
    </view>
  </view>
</template>
<script lang='ts'  setup >
import { ref, onMounted } from 'vue'
import { DiaryController } from "@/controller";
interface IProps {
  itemData: API.DIARY
}

const props = withDefaults(defineProps<IProps>(), {
  itemData: {
    id: '',
    content: '',
    messageCount: 0,
    allLikeCount: 0,
    replySecondUserName: ''
  }
})
//  heart-fill
 const emits = defineEmits(['reply'])

 const likeStatus = ref(false)

 const handleLike = async () => {
  likeStatus.value = !likeStatus.value
  const status = await DiaryController.opraDiaryLikeStatus(props.itemData.id, likeStatus.value)
  if (status !== 200) {
    likeStatus.value = !likeStatus.value
  }
 }

 onMounted(() => {
  likeStatus.value = props.itemData.isLike
 })
</script>
<style lang='scss' scoped >
 @import '../../styles/index.scss';
 .reply-com {
  width: 100vw;
  height: 168rpx;
  background-color: #fff;
  padding: 0 48rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 1px solid #e5e3e3;
  padding-bottom: 48rpx;
  .reply-input {
    width: 40%;
    height: 58rpx;
    border-radius: 32rpx;
    border: 2rpx solid #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 12rpx;
    font-size: 28rpx;
    background-color: #f5f5f5db;
    .reply-tip {
      margin-left: 12rpx;
      color: $text-grey;
    }
  }
  .status-bar {
    display: flex;
    justify-content: space-between;
    .status-bar-item {
      display: flex;
      align-items: center;
      margin-left: 48rpx;
      .icon {
        margin-top: -6rpx;
        width: 52rpx;
        height: 52rpx;
      }
      .count {
        margin-left: 12rpx;
        margin-bottom: 6rpx;
        color: $text-grey;
      }
    }
  }
 }
</style>